<template>
  <div>
    <el-form :model="dataForm" ref="dataForm" label-width="140px" size="small">
      <h4>基本信息</h4>
      <el-form-item label="产品状态：" prop="productName">
        <span v-text="dataForm.newProductStatus"></span>
      </el-form-item>
      <el-form-item label="产品名称：" prop="productName">
        <span v-text="dataForm.productName"></span>
      </el-form-item>
      <el-form-item label="产品大类：" prop="productCategory">
        <span v-text="dataForm.newProductCategory"></span>

      </el-form-item>
      <el-form-item label="产品小类：" prop="productSubCategory">
        <span v-text="dataForm.newProductSubCategory"></span>

      </el-form-item>
      <el-form-item label="所属机构:" prop="corporationId">
        <span v-text="dataForm.corporationName"></span>

      </el-form-item>
      <el-form-item label="可申请区域:" prop="admitArea">
        <span v-text="dataForm.admitArea.replaceAll(',','、')"></span>

      </el-form-item>
      <h4>产品要素</h4>
      <el-form-item label="最高额度：" prop="maxQuota">
        <span>{{ dataForm.maxQuota }}万元</span>
      </el-form-item>
      <el-form-item label="利率类型：" prop="interestRateType">
        <span v-text="dataForm.newInterestRateType"></span>
      </el-form-item>
      <el-form-item label="利率：" prop="minRate">
        <span>{{ dataForm.minRate+'%'+(dataForm.maxRate?'-'+dataForm.maxRate+'%':'起') }}</span>
      </el-form-item>
      <el-form-item label="还款方式：" prop="repaymentType">
        <span v-text="dataForm.newRepaymentType"></span>
      </el-form-item>
      <el-row>
        <el-form-item label="最长期限：" prop="maxPeriods">
          <span>{{ dataForm.maxPeriods }}期</span>
        </el-form-item>
      </el-row>
      <h4>办理信息</h4>
      <el-form-item label="准入要求：" prop="applyQualification">
        <span v-text="dataForm.applyQualification"></span>
      </el-form-item>
      <el-form-item label="审批流程：" prop="productFlow">
        <span v-text="dataForm.productFlow"></span>
      </el-form-item>

      <h4>面签要求</h4>
      <el-form-item label="是否需要面签：" prop="needFaceSign">
        <span v-text="dataForm.newNeedFaceSign"></span>
      </el-form-item>
      <el-form-item label="面签材料等要求：" prop="needMaterial">
        <span v-text="dataForm.needMaterial"></span>
      </el-form-item>
      <el-form-item label="产品推荐语：" prop="productSlogan">
        <span v-text="dataForm.productSlogan"></span>
      </el-form-item>
      <el-form-item label="其他备注：" prop="supplement">
        <span v-text="dataForm.supplement"></span>
      </el-form-item>


    </el-form>
  </div>
</template>

<script>
import {common} from '@/utils/common'
import api from '../api'
import {getCookie} from '@/utils/util'
import {CONSTANT_OBJ} from '@/utils/constant'
import {mapState} from 'vuex'
import multiCascader from '@/components/multiCascader/index.vue'

export default {
  components: {multiCascader},

  props: {
    editData: Object,
    org: {
      type: Object,
      default
        () {
        return {}
      }
    }
  },
  data () {
    return {
      selectedOptions: [],
      dataForm: {
        roleId: '',
        productId: '',//.
        productName: '',//产品名称
        productCategory: '',//产品大类
        productSubCategory: '',//产品小类
        productStatus: '',//产品状态
        corporationId: '',//合作机构ID
        corporationName: '',//合作机构名称
        admitArea: '',//可申请区域
        maxQuota: '',//最大额度
        interestRateType: '',//利率类型
        minRate: '',//最小利率
        maxRate: '',//最大利率
        repaymentType: '',//还款方式
        maxPeriods: '',//最大期数
        applyQualification: '',//申请资格
        productFlow: '',//产品流程
        needFaceSign: '',//是否需要面签
        needMaterial: '',//所需资料
        productSlogan: '',//产品推荐语
        supplement: '',//补充说明

      },
      corporationList: []
    }
  }
  ,
  methods: {
    close () {
      this.$emit('close')
    },
    //获取机构列表数据
    getOrgList () {
      api.queryList({tenantId: getCookie('tenantId')}).then(res => {
        const {responseCode, responseMsg, data} = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.corporationList = data
          let find = this.corporationList.find(item => item.corporationId === this.editData.corporationId) || {}
          this.dataForm.corporationName = find.corporationName
          console.log('机构列表', this.corporationList)
        }
      })
    }
    ,
    onChange () {
      console.log(this.selectedOptions)
      this.dataForm.admitArea = this.selectedOptions.map(item => item.join('-')).join(',')
    },
    convertDict (dictName, fieldName, item) {
      let newFieldName = 'new' + fieldName[0].toUpperCase() + fieldName.slice(1)
      item[newFieldName] = (this.dicts[dictName] || {childMap: {}}).childMap[item[fieldName]]
    },
    getDetail () {
      api.queryDetail({productId: this.editData.productId, productType: 'LOAN'}).then(res => {
        const {responseCode, responseMsg, data} = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          // this.convertDict('repayment_method', 'repaymentType', data)
          this.convertDict('corporation_status', 'productStatus', data)
          this.convertDict('interest_rate_type', 'interestRateType', data)

          data.newRepaymentType = (data.repaymentType || '').split(',').map(type => {
            return (this.dicts['repayment_method'] || {childMap: {}}).childMap[type]
          }).join(',')
          let productCategory = data['productCategory']
          let productCategoryStr = (this.dicts['product_category'] || {childMap: {}}).childMap[productCategory]
          data.newProductCategory = productCategoryStr
          let productSubCategory = (this.dicts['prod_sub_' + (productCategory || 'car_loan')] || {childMap: {}}).childMap[data.productSubCategory]
          data.newProductSubCategory = productSubCategory
          data.newNeedFaceSign = data.needFaceSign === 'Y' ? '是' : '否'
          data.newProductStatus = data.productStatus === 'OPEN' ? '已上架' : '已下架'

          let {maxRate, minRate, interestRateType} = data
          switch (interestRateType) {
            case 'month':
              data.rateRange = `${minRate * 12}%-${maxRate * 12}%`
              break
            case 'month_fee':
              data.rateRange = `${minRate * 12 * 1.85}%-${maxRate * 12 * 1.85}%`
              break
            default:
              data.rateRange = `${minRate}%-${maxRate}%`
          }
        }

        this.dataForm = data
        this.getOrgList()
      })
    }

  },

  mounted () {
    this.getDetail()
  },
  computed: {
    ...
      mapState({
        dicts: state => state.common.dicts
      })
  }
}
</script>

<style scoped>
</style>

